<template>
  <div class="son">
    <h3>我是son组件</h3>
    <h3>id:{{ id }}</h3>
    <h3>title:{{ title }}</h3>
    {{ msg }}
    <el-button @click="changeValue(1, 2, 3, $event)">改变msg的值</el-button>
    <el-button @click="emitValue">改变父组件的值</el-button>
  </div>
</template>

<script setup lang="ts" name="son">
import { watchEffect, watch } from "vue";
//props接收父组件的值
// type sonProps =  {
//   msg: number;
// }
interface sonProps {
  msg: number;
  id?: number;
  title?: string;
}
const props = withDefaults(defineProps<sonProps>(), {
  msg: 1
});

//emit的写法
interface sonEmits {
  (e: "on-change", value: number): void;
}
const $emit = defineEmits<sonEmits>();

/**
 * 改变msg
 */
const changeValue = (a: number, b: number, c: number, event: Event): void => {
  // console.log("props", props);
  // console.log("a,b,c,event", a, b, c, event);
};

/**
 * 触发父组件
 */
const emitValue = (): void => {
  $emit("on-change", 111);
};

watchEffect(onCleanup => {
  console.log("onCleanup", onCleanup);
  // 在 3.5 之前只运行一次
  // 在 3.5+ 中在 "foo" prop 变化时重新执行
  console.log("props.msg的watchEffect", props.msg);
});
watch(
  () => props.msg,
  (value, oldValue, onCleanup) => {
    console.log("msg的watch", value);
  },
  { deep: true, immediate: true }
);
</script>

<style scoped lang="scss">
.son {
  height: 200px;
  width: 400px;
  background: red;
}
</style>
